<template>
  <div style="width:500px;margin:50px auto 0 auto;background:#efefef;padding:30px 0 0 30px; border-radius:45px">
      <div style="font-size:20px;">个人信息</div>
       <div style="width:100%;text-align:center">
           <el-avatar icon="el-icon-user-solid" :size="60"></el-avatar>
       </div>
       <div v-if="userData.name" class="userInfo">
           <div>
               <span>账号：</span>
               <span>{{userData.accountNumber}}</span>
           </div>
           <div>
               <span>姓名：</span>
               <span>{{userData.name}}</span>
           </div>
           <div>
               <span>密码：</span>
               <span>{{userData.password}}</span>
           </div>
           <div>
               <span>身份：</span>
               <span>{{userData.type === '0'?'学生':userData.type==='1'?'老师':'管理员'}}</span>
           </div>
           <div>
               <span>班级：</span>
               <span>{{userData.clazz.grade}}年级{{userData.clazz.classNumber}}班</span>
           </div>
           <div>
               <span>性别：</span>
               <span>{{userData.gender === 0?'男':'女'}}</span>
           </div>
           <div>
               <span>出生年月日：</span>
               <span>{{userData.birthday}}</span>
           </div>
       </div>
       <div style="margin-left:400px"><button @click="dialogFormVisible=true">编辑</button></div>
        <el-dialog
        title="编辑个人信息"
        :visible.sync="dialogFormVisible"
        width="500px"
      >
        <el-form
          :model="editUserinfoForm"
          ref="editUserinfoForm"
          label-width="120px"
          :inline="true"
        >
          <el-form-item label="姓名:">
            <el-input v-model="editUserinfoForm.name" ></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input v-model="editUserinfoForm.password" ></el-input>
          </el-form-item>
          <el-form-item  label="身份:">
            <el-select v-model="editUserinfoForm.type" >
              <el-option label="学生" value="0"> </el-option>
              <el-option label="老师" value="1"> </el-option>
               <el-option
                label="管理员"
                value="2">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别:">
            <el-select v-model="editUserinfoForm.gender" >
              <el-option label="男" value="0"> </el-option>
              <el-option label="女" value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级:">
            <el-select v-model="editUserinfoForm.clazz.id" placeholder="请选择班级">
                <el-option
                v-for="item in classList"
                :key="item.id"
                :label="`${item.grade}年级${item.classNumber}班`"
                :value="item.id"
                ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生年月日:">
            <el-date-picker
              v-model="editUserinfoForm.birthday"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submit"
            >提 交</el-button
          >
        </div>
      </el-dialog>
  </div>
</template>

<script>
import webservice from '../../../api/webservice'
export default {
    data(){
        return{
            userData:{},
            dialogFormVisible:false,
            editUserinfoForm:{
                clazz:{
                    id:''
                }
            },
            classList:[]
        }
    },
    created(){
        this.userData = JSON.parse(window.sessionStorage.getItem('userInfo'))
    },
    mounted(){
        this.editUserinfoForm = JSON.parse(JSON.stringify(this.userData))
        this.getClassData()
    },
    methods:{
        submit(){
        let _param = {
        id:this.editUserinfoForm.id,
        name:this.editUserinfoForm.name,
        password:this.editUserinfoForm.password,
        type:this.editUserinfoForm.type,
        gender:this.editUserinfoForm.gender,
        clazzId:this.editUserinfoForm.clazz.id,
        birthday:this.editUserinfoForm.birthday,
      };
      let _params = JSON.stringify(_param)
      webservice.HttpPost("/api/user/updateUser", _params, (data) => {
        if (data.code === 200) {
            this.$message.success({
            message: '修改成功！',
            showClose: true,
            duration: 1000,
          });
          this.dialogFormVisible = false
          sessionStorage.setItem('userInfo',JSON.stringify(data.data))
          this.userData = data.data

        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
        },
         //获取班级
        getClassData() {
      webservice.HttpPost("/api/clazz/selectClazzList", '{}', (data) => {
        if (data.code === 200) {
          this.classList = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    }
}
</script>

<style scoped>
.userInfo{
    height: 300px;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-content:center;
    padding-left: 20px;
}
.userInfo div{
    height: 50px;
    line-height: 50px;
}
</style>